<template>
  <div>
    <div style="height: 100%;width: 100%;">
      <!-- <ListTitle list-title="空域运行管理"></ListTitle> -->
      <!-- <div>
        <button @click="toggleAirData">切换</button>
      </div> -->

      <!-- <div id="cesiumContainer" style="height: 54.5rem; margin-top: 0.5%;"></div> -->
      <div class="cesiumContainerBox">
        <!-- <img class="mapBg" src="../assets/img/module1/dialog_bg.png" alt="" srcset="" /> -->
        <div class="layer"></div>
        <div id="cesiumContainer" style="height: 83vh;width: 100%;"></div>
      </div>

      <div class="left-panel-container">
        <div class="img_left_title">
          <img src="../assets/img/module2/content.png" style="width: 100%" />
          <img src="../assets/img/module2/snailtitleicon.png" @click="toggleAirData"
            style="position: absolute; top: 3px; left: 15px; cursor: pointer; pointer-events: auto;" />
          <span class="text_left_title">空域对象列表</span>
        </div>
        <button v-if="!tableVisible" class="table-button-display" @click="tableVisible = true"></button>
        <button v-if="tableVisible" class="table-button-hidden" @click="tableVisible = false"></button>


        <!-- 功能输入按钮部分 -->
        <div v-if="tableVisible" class="table-actions">
          <select v-model="searchQuery" @change="filterTable" class="search-input">
            <option value="">对象类型</option>
            <option value="航路">航路</option>
            <option value="起降区">起降区</option>
            <option value="作业区">作业区</option>
            <option value="特殊区域">特殊区域</option>
          </select>
        </div>
        <div v-if="tableVisible" class="table-actions-2">
          <select v-model="searchQuery" @change="filterTable" class="search-input">
            <option value="">空域类型</option>
            <option value="点线型">点线型</option>
            <option value="圆柱形">圆柱形</option>
            <option value="多边体形">多边体形</option>
          </select>
        </div>
        <div v-if="tableVisible" class="table-context">
          <CustomTable :data="tableData" :columns="columns" @viewDetails="handleViewDetails" @hoverLeave="hoverLeave"
            height="100%" ref="customTable" />
        </div>
      </div>

      <!-- 弹窗内容 -->
      <div class="right-panel-container" v-if="statusDialogVisible">
        <CustomDialog :statusDialogVisible="statusDialogVisible" :selectedObjectName="selectedDetails.name"
          :selectedObjectId="selectedDetails.id" @update:statusDialogVisible="statusDialogVisible = $event">
        </CustomDialog>
      </div>

    </div>
  </div>
</template>

<script>
import ListTitle from "@/components/ListTitle";
import CustomTable from '@/components/CustomTableModule6Left.vue';
import CustomDialog from "@/components/CustomDialogModule6InformationNew.vue";
import { drawCircleArea, drawParallelogramArea, drawSquareArea } from '@/utils/draw2DShapes.js';
import { draw3DRectangularPipelineTrackM1_2, draw3DPolygonalPrismM1, drawCylinderAreaM1, drawMultipleFixedCylinders } from '@/utils/draw3D-module6.js';
import { addDroneModel } from "@/utils/draw3D-module3.js";

import axios from "axios";

const baseApi = process.env.NODE_ENV === 'production'
  //? process.env.VUE_APP_REMOTE_API
  ? '/api'  // 使用代理路径
  : process.env.VUE_APP_REMOTE_API_MODULE6;

const baseWebsocketApi = process.env.VUE_APP_WEBSOCKET
console.log("basewebsocketapi", baseWebsocketApi)

export default {
  name: "Module6AirspaceManage",
  components: {
    CustomTable,
    // CustomDialogConfirm,
    CustomDialog,
    ListTitle
  },
  data() {
    return {
      statusDialogVisible: true, // 状态弹窗显示
      cofirmSubmitDialogVisible: false,
      selectedDetails: {
        startTime: "20240510T08:00:00",
        endTime: "20240510T10:00:00",
      }, // 存储选中的行数据
      selectedSort: "id", // 默认按序号排序
      searchQuery: "", // 搜索关键字
      inverseSort: true, // 排序顺序，默认升序
      fileList: [], // 上传文件列表
      tableData: [], // 表格数据从服务器获取
      columns: [
        { prop: "index", label: "#", width: "20%" },
        { prop: "name", label: "空域对象名称", width: "40%" },
        { prop: "airLaneType", label: "空域类型", width: "40%" },
      ],
      tableVisible: true,
      gisdata: {
        circular: [],          // 圆柱体数据
        straight: [],           // 航路数据
        polygonal: [],           // 多边形柱体数据
        secondCircular: []     // 第二类圆柱体数据
      },
      selectedRow: null, // 记录当前选中的表格行
      selectedEntity: null, // 记录当前选中的地图实体
      originalEntityColor: null, // 用于恢复实体的原始颜色
      entityMap: {},
      currentLabelEntity: null, // 记录当前选中的标签实体 
      isShowingHanglu: true,  // 默认显示航路数据
      droneModels: [],
      wsClosing: true,
      //  positions:[],// 用于存储所有无人机球体的位置
      ws: null,
    };
  },
  async mounted() {
    // 页面加载时获取数据
    const future = this.fetchTableData();
    this.initializeCesium();
    await future;
    // this.updateRoutes();
    // this.updatePolygonAreas();
    // this.updateCircleAreas();
    this.drawgis();

    // 绘制完成后进行一次 zoomTo 操作
    this.zoomToEntities();

    // 动态无人机数据
    this.S6drawDrone();
  },
  beforeDestroy() {
    // 比如清除定时器，或手动调用一些清理方法
    if (this.viewer) {
      this.viewer.destroy();
      this.viewer = null;
    }
  },
  methods: {
    // 获取表格数据
    async fetchTableData() {
      try {
        const response = await axios.post(`${baseApi}/manage/searchall`, {}, {
          // params: {
          //   keyword: this.searchQuery,
          // },
        });
        console.log('运行评估管理模块页面初始化时从后端获取数据', response);
        if (response.data.code === 0) {
          this.tableData = [];
          // 初始化计数器
          let index = 1;
          response.data.data.forEach((item) => {
            const newItem = {
              ...item,
              index,
            };

            // 根据 type 字段设置 airLaneType
            switch (item.type) {
              case 1:
                newItem.airLaneType = "起降区";
                break;
              case 2:
                newItem.airLaneType = "航路";
                break;
              case 3:
                newItem.airLaneType = "作业区";
                break;
              case 4:
                newItem.airLaneType = "特殊区域";
                break;
              case 5:
                newItem.airLaneType = "航线";
                break;
              default:
                newItem.airLaneType = "未知类型"; // 如果有其他类型
                break;
            }

            this.tableData.push(newItem);
            index++;
          });
          console.log('从后端获取数据处理后的this.tableData', this.tableData);
          this.classifyData()
          // this.tableData = response.data.data;
        }
      } catch (error) {
        console.error("获取表格数据失败", error);
      }
    },
    async drawgis() {
      try {
        this.viewer.entities.removeAll();
        // this.refreshGISdata(); 
        const { circular, polygonal, straight, secondCircular } = this.gisdata;
        const entitiesToFlyTo = [];
        console.log("更新 GIS 绘制数据", this.gisdata);

        // 绘制圆柱体
        if (circular && circular.length > 0) {
          circular.forEach((cylinder, index) => {
            // const entity = drawCylinderAreaM1(
            //   this.viewer,
            //   cylinder.longitude,
            //   cylinder.latitude,
            //   cylinder.minAltitude,
            //   cylinder.maxAltitude,
            //   cylinder.radius,
            //   cylinder.color,
            //   0.5,
            //   cylinder.text
            // );
            let entity;

            // 判断 activeidentityid 并调用不同的绘制函数
            if (cylinder.activeidentityid === "main_qijiang") {
              // 如果 activeidentityid 为 "main_qijiang"，调用 drawMultipleFixedCylinders
              entity = drawMultipleFixedCylinders(
                this.viewer,
                cylinder.longitude,
                cylinder.latitude,
                cylinder.minAltitude,
                cylinder.maxAltitude,
                cylinder.radius,
                cylinder.color,
                0.5,
                cylinder.text
              );
            } else if (cylinder.activeidentityid === "main_1") {
              // 如果 activeidentityid 为 "main_1"，调用原来的 drawCylinderAreaM1
              entity = drawCylinderAreaM1(
                this.viewer,
                cylinder.longitude,
                cylinder.latitude,
                cylinder.minAltitude,
                cylinder.maxAltitude,
                cylinder.radius,
                cylinder.color,
                0.5,
                cylinder.text
              );
            }
            if (entity) {
              entity.properties = new Cesium.PropertyBag({
                index: cylinder.index,
                activeIndex: cylinder.activeidentityid,
                type: 'circular',
              });
              this.addEntity(cylinder.activeidentityid, cylinder.index, entity);
              entitiesToFlyTo.push(entity);
            }
          });
        }

        // 绘制第二类圆柱体
        if (secondCircular && secondCircular.length > 0) {
          secondCircular.forEach((cylinder, index) => {
            const entity = drawCylinderAreaM1(
              this.viewer,
              cylinder.longitude,
              cylinder.latitude,
              cylinder.minAltitude,
              cylinder.maxAltitude,
              cylinder.radius,
              cylinder.color,
              0.5,
              cylinder.text
            );
            if (entity) {
              entity.properties = new Cesium.PropertyBag({
                index: cylinder.index,
                activeIndex: cylinder.activeidentityid,
                type: 'circular',
              });
              this.addEntity(cylinder.activeidentityid, cylinder.index, entity);
              entitiesToFlyTo.push(entity);
            }
          });
        }

        // 绘制多边形柱体
        if (polygonal && polygonal.length > 0) {
          polygonal.forEach((polygon, index) => {
            // console.log("zhubeide多边体数据了", polygon)
            if (polygon.coordinates && Array.isArray(polygon.coordinates) && polygon.coordinates.length > 0) {
              let opacity = polygon.color === 'RED' ? 0.3 : 0.5;

              // 检查 text 是否是 "珠海机场"
              if (polygon.text !== "珠海机场") {
                opacity = 0.05; // 如果不是珠海机场，则降低透明度，最低为 0
              }

              const entity = draw3DPolygonalPrismM1(
                this.viewer,
                polygon.coordinates.map(coord => [coord.longitude, coord.latitude]).flat(),
                polygon.minAltitude,
                polygon.maxAltitude,
                polygon.color,
                // 0.5,
                opacity,
                polygon.text
              );
              if (entity) {
                entity.properties = new Cesium.PropertyBag({
                  index: polygon.index,
                  activeIndex: polygon.activeidentityid,
                  type: 'polygonal',
                });
                this.addEntity(polygon.activeidentityid, polygon.index, entity);
                entitiesToFlyTo.push(entity);
              }
            } else {
              console.log(`Polygon ${index} 的 coordinates 数据为空或未定义`);
            }
          });
        }

        // // 绘制长方体管道
        // if (straight && straight.length > 0) {
        //   console.log("绘制长方体管道数据", straight);
        //   straight.forEach((pipeline, index) => {
        //     // const coordinates = pipeline.coordinates.map(coord => [coord.longitude, coord.latitude, coord.altitude]).flat();
        //     const coordinates = pipeline.coordinates.map(coord => [coord.longitude, coord.latitude, pipeline.maxAltitude]).flat();
        //     // const sizes = new Array(coordinates.length / 3 - 1).fill([100, 50]);
        //     const sizes = new Array(coordinates.length / 3 - 1).fill([100, pipeline.maxAltitude - pipeline.minAltitude]);

        //     if (sizes.length === coordinates.length / 3 - 1) {
        //       const entities = draw3DRectangularPipelineTrackM1_2(
        //         this.viewer,
        //         coordinates,
        //         sizes,
        //         0.5,
        //         pipeline.color,
        //         pipeline.text
        //       );
        //       if (entities) {
        //         entities.forEach((entity, num) => {
        //           entity.properties = new Cesium.PropertyBag({
        //             index: pipeline.index,
        //             activeIndex: pipeline.activeidentityid,
        //             type: 'straight',
        //           });
        //           entitiesToFlyTo.push(entity);
        //         });
        //         this.addEntity(pipeline.activeidentityid, pipeline.index, entities);
        //       }
        //     } else {
        //       console.error('Sizes array length does not match coordinates array length minus one');
        //     }
        //   });
        // }
        // 绘制长方体管道数据（航线和航路）
        if (straight && straight.length > 0) {
          console.log("绘制长方体管道数据", straight);
          straight.forEach((pipeline) => {
            // 判断是否绘制该管道数据
            const isHangXian = pipeline.color === 'DEEPSKYBLUE';
            const isZadao = pipeline.color === 'DARKCYAN'; // 始终要绘制的匝道

            if (isZadao || (isHangXian && !this.isShowingHanglu) || (!isHangXian && this.isShowingHanglu)) {
              // 设置坐标和尺寸
              const coordinates = pipeline.coordinates.map(coord => [coord.longitude, coord.latitude, pipeline.maxAltitude]).flat();
              const sizes = new Array(coordinates.length / 3 - 1).fill([100, pipeline.maxAltitude - pipeline.minAltitude]);

              // 绘制长方体管道
              if (sizes.length === coordinates.length / 3 - 1) {
                const entities = draw3DRectangularPipelineTrackM1_2(
                  this.viewer,
                  coordinates,
                  sizes,
                  0.5,
                  pipeline.color,
                  pipeline.text
                );
                if (entities) {
                  entities.forEach((entity) => {
                    entity.properties = new Cesium.PropertyBag({
                      index: pipeline.index,
                      activeIndex: pipeline.activeidentityid,
                      type: isHangXian ? 'airLane' : 'straight',  // 设置类型
                    });
                    entitiesToFlyTo.push(entity);
                  });
                  this.addEntity(pipeline.activeidentityid, pipeline.index, entities);
                }
              } else {
                console.error('Sizes array length does not match coordinates array length minus one');
              }
            }
          });
        }

        // 调整视角
        if (entitiesToFlyTo.length > 0) {
          this.viewer.flyTo(entitiesToFlyTo, {
            duration: 2,
            offset: {
              heading: Cesium.Math.toRadians(0),
              pitch: Cesium.Math.toRadians(-30),
            }
          });
        }

        console.log("entityMap", this.entityMap);
      } catch (error) {
        console.error("更新 GIS 数据时出错:", error);
      }
    },
    // 添加实体函数
    addEntity(id1, id2, entity) {
      const key = `${id1}-${id2}`;  // 组合 id1 和 id2 作为唯一键
      this.entityMap[key] = entity;  // 存储实体
    },
    // 获取实体函数
    getEntity(id1, id2) {
      const key = `${id1}-${id2}`;  // 组合 id1 和 id2 生成键
      return this.entityMap[key];  // 获取对应实体
    },
    sortTable() {
      // 重新获取排序后的数据
      this.fetchTableData();
    },
    sortInverse() {
      this.inverseSort = !this.inverseSort;
      this.fetchTableData();
    },

    filterTable() {
      // 触发搜索过滤，重新获取数据
      this.fetchTableData();
    },
    refreshTable() {
      // 刷新表格数据，重置搜索和排序
      this.selectedSort = "id";
      this.searchQuery = "";
      this.fetchTableData();
    },
    handleViewDetails(row) {
      this.selectedDetails = row; // 将点击的行数据保存
      console.log("做弹窗选中的行的数据", this.selectedDetails)
      this.statusDialogVisible = true; // 显示弹窗

      // 使用对象的 `id` 和 `type` 调用透明度更改和视角聚焦
      this.entityViewChange(row.mainType, row.sequence, row.shapeCategory);
    },
    entityViewChange(id1, id2, type) {
      const entity = this.getEntity(id1, id2);
      console.log("选中即将切换视角的entity", entity)

      // 获取当前视角的参数
      const currentView = this.viewer.camera;
      const currentHeading = currentView.heading;
      const currentPitch = currentView.pitch;
      const currentRoll = currentView.roll;

      // 计算飞行时间，根据实体的高度调整
      let duration = 5; // 默认飞行时间为5秒

      // 实体包含 minAltitude 和 maxAltitude 属性
      const altitudeDifference = entity.maxAltitude && entity.minAltitude
        ? entity.maxAltitude - entity.minAltitude
        : 100; // 若未提供高度信息，默认设置为100米

      // 计算最小视角距离，避免视角太近
      const minRange = Math.max(altitudeDifference * 10, 1000); // 根据高度调整视角距离，最小距离为500米

      if (Cesium.defined(entity)) {
        // 临时飞行到实体位置，获取默认的 range 值
        this.viewer.flyTo(entity, {
          duration: duration,
          offset: {
            heading: currentHeading,
            pitch: Cesium.Math.toRadians(-30),
            roll: currentRoll,
            range: undefined // 不设置 range 以获取默认的飞行距离
          }
        }).then(() => {
          // 获取默认的 range 值
          const defaultRange = this.viewer.camera.positionCartographic.height;

          // 选取较大值作为最终的 range
          const finalRange = Math.max(minRange, defaultRange);

          // 重新飞行到实体，使用最终的 range 值
          this.viewer.flyTo(entity, {
            duration: 2,
            offset: {
              heading: currentHeading,
              pitch: Cesium.Math.toRadians(-30),
              roll: currentRoll,
              range: finalRange // 使用最终的 range
            }
          });

          // 调用颜色和透明度更改方法
          this.entityChangeColor(entity, type);
        });
        // 调用颜色和透明度更改方法
        // this.entityChangeColor(entity, type);
      }
    },
    entityChangeColor(entityAgent, type) {
      // 上一个点击的实体恢复颜色
      if (this.currentLabelEntity) {
        this.currentColor.alpha = 0.2;
        if (this.currentEntityType == 'straight') {
          this.currentLabelEntity.forEach(entity => {
            entity.material.color = this.currentColor;
            console.log("此时的entity", entity)
            // 恢复距离限制
            if (entity.label) {
              entity.label.distanceDisplayCondition = new Cesium.DistanceDisplayCondition(0.0, 4000.0);
            }
          })
        }
        else {
          this.currentLabelEntity.material.color = this.currentColor;
          console.log("此时的this.currentLabelEntity", this.currentLabelEntity)
          if (this.currentLabelEntity.label) {
            this.currentLabelEntity.label.distanceDisplayCondition = new Cesium.DistanceDisplayCondition(0.0, 4000.0);
          }
        }
      }
      //更新当前实体的种类
      this.currentEntityType = type;
      console.log("entityAgententityAgent", entityAgent)
      console.log("type", type)
      // 对当前点击的实体进行颜色变化
      if (type === 'circular') {
        this.currentLabelEntity = entityAgent.cylinder
      } else if (type === 'polygonal') {
        this.currentLabelEntity = entityAgent.polygon
        console.log("entityAgent.polygon", entityAgent.polygon)
      } else if (type === 'straight') {
        this.currentLabelEntity = entityAgent.map(entity => entity.corridor)
      }
      if (this.currentEntityType == 'straight') {
        this.currentColor = this.currentLabelEntity[0].material.color.getValue(Cesium.JulianDate.now()).clone();
        this.currentColor.alpha = 1;
        this.currentLabelEntity.forEach(entity => {
          entity.material.color = this.currentColor;
          // 移除距离限制
          if (entity.label) {
            entity.label.distanceDisplayCondition = null;
          }
        }
        )
      }
      else {
        this.currentColor = this.currentLabelEntity.material.color.getValue(Cesium.JulianDate.now()).clone();
        this.currentColor.alpha = 1;
        this.currentLabelEntity.material.color = this.currentColor;
        if (this.currentLabelEntity.label) {
          this.currentLabelEntity.label.distanceDisplayCondition = null;
        }
      }
      console.log('完成实体的变色')
    },
    zoomToShape(lon, lat, altitude) {
      const camera = this.viewer.camera;

      // 设置飞行到目标位置的参数
      const destination = Cesium.Cartesian3.fromDegrees(lon, lat - 0.03, altitude + 1000); // 飞行到该形状
      const heading = Cesium.Math.toRadians(0); // 指向 0 度（北方）
      const pitch = Cesium.Math.toRadians(-30); // 设置俯视角度为 -30 度（相当于抬高一些）
      const roll = Cesium.Math.toRadians(0);   // 无滚转

      // 使用 flyTo 实现平滑过渡，调整视角
      camera.flyTo({
        destination: destination,
        orientation: {
          heading: heading,
          pitch: pitch,
          roll: roll,
        },
        duration: 2.0, // 飞行时间（单位：秒）
        offset: {
          heading: heading,
          pitch: pitch,
        }
      });
    },
    hoverLeave() {
      // this.statusDialogVisible = false;
    },

    submitVisibleChange() {
      this.cofirmSubmitDialogVisible = true;
    },
    async classifyData() {
      // 定义四个数组来存储不同类型的数据
      let circularData = [];    // 圆柱体数据
      let airLaneData = [];     // 航路数据
      let polygonData = [];     // 多边形柱体数据
      let secondCircularData = []; // 第二类圆柱体数据

      // 遍历 tableData，根据 type 和 shapes[0].shapeType 分类
      this.tableData.forEach(item => {
        // 获取第一个 shape 的类型
        const shapeType = item.shapes && item.shapes[0] ? item.shapes[0].shapeType : null;

        // 根据 shapeType 添加 mainType、shapeCategory 字段和序号
        if (shapeType === 1) {
          item.shapeCategory = 'circular';  // 形状类型
          circularData.push(item);           // 圆柱体
        } else if (shapeType === 4) {
          item.shapeCategory = 'straight';   // 形状类型
          airLaneData.push(item);            // 航路
        } else if (shapeType === 3) {
          item.shapeCategory = 'polygonal';  // 形状类型
          polygonData.push(item);            // 多边形柱体
        } else if (shapeType === 2) {
          item.shapeCategory = 'circular';   // 形状类型（第二类圆柱体）
          secondCircularData.push(item);
        } else {
          console.log("未识别的 shapeType:", shapeType);
        }
      });

      // 输出分类后的结果
      console.log('圆柱体数据:', circularData);
      console.log('航路数据:', airLaneData);
      console.log('多边形柱体数据:', polygonData);
      console.log('第二类圆柱体数据:', secondCircularData);

      // 将这些数据进行处理
      this.handleCircularData(circularData);
      this.handleAirLaneData(airLaneData);
      this.handlePolygonData(polygonData);
      this.handleSecondCircularData(secondCircularData);

      console.log('处理后最后绘制gis的数据', this.gisdata);

      this.classifyAndCalculateArea();
    },
    async classifyAndCalculateArea() {
      // 定义存储各区域面积的变量
      const areaByType = {
        "起降区": 0,
        "作业区": 0,
        "特殊区域": 0,
        "航线": 0,
        "航路": 0,
        "其他区域": 0
      };

      // 遍历 tableData，按区域计算面积
      for (const item of this.tableData) {
        const airLaneType = item.airLaneType || "其他区域"; // 区域类型
        const shape = item.shapes && item.shapes[0];       // 获取第一个形状

        if (!shape) {
          console.log(`缺少 shape 数据，跳过:`, item);
          continue;
        }

        if (shape.shapeType === 1 || shape.shapeType === 2) {
          // 圆柱体面积计算
          if (shape.rout) {
            const radius = shape.rout;
            const area = Math.PI * Math.pow(radius, 2);
            areaByType[airLaneType] += area;
          } else {
            console.log(`圆柱体缺少 rout 属性，无法计算面积:`, item);
          }
        } else if (shape.shapeType === 3) {
          // 多边形柱体面积计算
          if (shape.points) {
            const positions = shape.points.map(point => [point.longitude, point.latitude]).flat();
            console.log("计算多边形面积的position数据", positions)
            try {
              const response = await Xmap.AirspaceManage.HierarchicalGrid.AreaCompute(positions);
              // const testttt = await Xmap.AirspaceManage.HierarchicalGrid.AreaCompute( [0, 0,   0.0002777777777777778, 0,  0.00027777777777, 0.0002777,  0, 0.0002777  ])
              const area = parseFloat(response);
              areaByType[airLaneType] += area;
            } catch (error) {
              console.error(`多边形面积计算出错: ${error.message}`, item);
            }
          } else {
            console.log(`多边形柱体缺少 points 属性，无法计算面积:`, item);
          }
        } else if (shape.shapeType === 4) {
          // 航路面积计算
          const airLaneData = [item]; // 当前航路数据
          const width = 50;          // 航路宽度
          const airLaneArea = this.calculateAirLaneArea(airLaneData, width);
          areaByType[airLaneType] += airLaneArea;
        } else {
          console.log(`未知 shapeType，跳过:`, shape.shapeType);
        }
      }

      // 输出计算结果
      console.log("各区域面积累加结果:", areaByType);
      this.calculateAreaPercentage(areaByType)
      // 返回所有区域面积
      // return areaByType;
    },
    calculateAreaPercentage(areaByType) {
      const totalArea = Object.values(areaByType).reduce((sum, area) => sum + area, 0); // 总面积

      if (totalArea === 0) {
        console.error("总面积为 0，无法计算占比");
        return;
      }

      const percentageByType = {};

      for (const [type, area] of Object.entries(areaByType)) {
        const percentage = (area / totalArea) * 100;
        percentageByType[type] = {
          area: area.toFixed(2), // 面积保留两位小数
          percentage: percentage.toFixed(2) + "%" // 占比
        };
      }

      console.log("各区域面积占比和面积:", percentageByType);
      console.log("总面积:", totalArea.toFixed(2) + " 平方米");

      return {
        percentageByType,
        totalArea: totalArea.toFixed(2)
      };
    },
    calculateAirLaneArea(item, width) {
      // 地球半径（单位：米）
      const EARTH_RADIUS = 6371000;
      // console.log("我看看要算航路航线面积的数据", item)

      // 计算两点之间的球面距离
      function haversineDistance(lat1, lon1, lat2, lon2) {
        const toRadians = angle => (angle * Math.PI) / 180;
        const dLat = toRadians(lat2 - lat1);
        const dLon = toRadians(lon2 - lon1);
        const radLat1 = toRadians(lat1);
        const radLat2 = toRadians(lat2);

        const a =
          Math.sin(dLat / 2) * Math.sin(dLat / 2) +
          Math.cos(radLat1) * Math.cos(radLat2) * Math.sin(dLon / 2) * Math.sin(dLon / 2);
        const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
        return EARTH_RADIUS * c; // 距离单位：米
      }

      // 校验并提取 points
      const shape = item[0].shapes && item[0].shapes[0];
      if (!shape || !shape.points || shape.points.length < 2) {
        console.error("航路数据的 points 不完整，无法计算:", shape ? shape.points : null);
        return 0;
      }

      const points = shape.points; // 提取 points
      let totalArea = 0;

      for (let i = 0; i < points.length - 1; i++) {
        const point1 = points[i];
        const point2 = points[i + 1];

        // 计算两点之间的距离（单位：米）
        const distance = haversineDistance(
          point1.latitude,
          point1.longitude,
          point2.latitude,
          point2.longitude
        );

        // 计算当前段的面积
        const area = distance * width;
        totalArea += area;

        // console.log(
        //   `航路段子段: [(${point1.latitude}, ${point1.longitude}) -> (${point2.latitude}, ${point2.longitude})]，距离: ${distance.toFixed(
        //     2
        //   )} 米，面积: ${area.toFixed(2)} 平方米`
        // );
      }

      // console.log(`该条航路/航线段总面积: ${totalArea.toFixed(2)} 平方米`);
      return totalArea;
    },
    handleCircularData(data) {
      // 遍历并处理圆柱体数据
      data.forEach((item) => {
        // 只取第一个 shape 进行处理
        const shape = item.shapes[0];
        if (shape) {
          // 根据 item.type 设置颜色
          let color;
          switch (item.type) {
            case 4:
              color = 'RED';
              break;
            case 1:
              color = 'YELLOW';
              break;
            case 2:
              color = 'ORANGE';
              break;
            case 3:
              color = 'CYAN';
              break;
            default:
              color = 'CYAN';  // 默认颜色
          }

          // 添加字段 'mainType' 和 'sequenceIndex' 到 item
          // item.mainType = 'main1';             // 添加 mainType 字段
          if (item.airLaneType === "起降区") {
            item.mainType = "main_qijiang"; // 对应的值可以根据需要设置
          } else {
            item.mainType = "main1"; // 默认值
          }

          item.sequence = item.index;     // 添加 index 字段
          // 处理第一个 shape 的数据，进行绘制等操作
          this.cirularpush(shape, item.index, item.mainType, item.name, color);
        }
      });
    },
    handlePolygonData(data) {
      // console.log("处理数据时的多边体数据", data)
      // 遍历并处理多边形柱体数据
      data.forEach((item) => {
        // 遍历每个 shape，检查 shapeType 是否为 3（多边形柱体）
        item.shapes.forEach((shape) => {
          if (shape.shapeType === 3) { // 多边形柱体
            // 从 shape 中获取多边形顶点数据和其他属性
            const points = shape.points;  // 获取顶点数据
            const minAltitude = shape.minAltitude;  // 获取最小高度
            const maxAltitude = shape.maxAltitude;  // 获取最大高度
            const index = item.index;  // 获取索引
            const infoid = 'main' + item.type;  // 根据 type 设置标识符
            const text = item.name;  // 获取区域名称
            // 根据 item.type 设置颜色
            let color;
            switch (item.type) {
              case 4:
                color = 'RED';
                break;
              case 1:
                color = 'YELLOW';
                break;
              case 2:
                color = 'ORANGE';
                break;
              case 3:
                color = 'CYAN';
                break;
              default:
                color = 'CYAN';  // 默认颜色
            }

            // 添加字段 'mainType' 和 'sequenceIndex' 到 item
            item.mainType = 'main3';             // 添加 mainType 字段
            item.sequence = item.index;     // 添加 index 字段
            // 调用 polygonalpush 函数处理数据
            this.polygonalpush(points, minAltitude, maxAltitude, index, "main3", text, color);
            // console.log(`多边形柱体 ${item.name} 更新`);
          }
        });
      });
    },
    handleSecondCircularData(data) {
      // 遍历并处理第二类圆柱体数据
      data.forEach((item) => {
        item.shapes.forEach((shape) => {
          if (shape.shapeType === 4) { // 第二类圆柱体
            // 添加字段 'mainType' 和 'sequenceIndex' 到 item
            item.mainType = 'main4';             // 添加 mainType 字段
            item.sequence = item.index;     // 添加 index 字段
            this.cirularpush(shape, item.index, 'main4', item.name, 'RED');
            // console.log(`第二类圆柱体 ${item.name} 更新`);
          }
        });
      });
    },
    // 切换显示航路或航线
    toggleAirData() {
      this.isShowingHanglu = !this.isShowingHanglu;
      this.drawgis()
      if (!this.isShowingHanglu) {
        console.log("现在是航线，需要建立websocket");
        this.S6drawDrone();
      }
      else {
        console.log("现在是航路，不需要ws", this.ws);
        if (this.ws) {
          console.log(
            "选择的时刻不需要ws，但是存在了ws，即将清除ws",
            this.ws
          );
          this.wsClosing = true; // 标记 WebSocket 正在关闭
          this.ws.onmessage = null; // 禁止处理关闭后的消息
          this.ws.close(); // 关闭 WebSocket 连接
          this.ws = null;
          this.droneModels = [];
        }
      }
    },
    handleAirLaneData(data) {
      // 遍历航路数据并根据 type 使用不同的颜色绘制
      data.forEach((item) => {
        item.shapes.forEach((shape) => {
          // console.log("看看每个航路的info", item.info)
          const isHangxian = item.info !== null;  // 判断是否是航路
          let color = 'DEEPSKYBLUE';  // 默认颜色为蓝色，用于航线

          if (isHangxian) {
            // 航路颜色设置
            switch (item.info.type) {
              case 0:
                color = 'CHOCOLATE';  // 低速航路
                break;
              case 1:
                color = 'ORANGE';  // 中速航路
                break;
              case 2:
                color = 'CORNFLOWERBLUE';  // 高速航路
                break;
              case 3:
                color = "DARKCYAN";  // 匝道
                break;
            }
          } else {
            color = 'DEEPSKYBLUE';  // 航线的默认颜色为蓝色
          }

          // 检查显示条件
          // if ((isHangxian && this.isShowingHanglu) || (!isHangxian && !this.isShowingHanglu)) {
          if (true) {
            // 添加字段 'mainType' 和 'sequenceIndex' 到 item
            item.mainType = isHangxian ? 'main2' : 'line';  // 根据类型设置不同的mainType
            item.sequence = item.index;  // 添加索引字段

            // 调用绘制航路的方法
            this.straightpush(
              shape.points,              // 点数据
              shape.minAltitude,         // 底部高度
              shape.maxAltitude,         // 顶部高度
              item.index,                // 索引
              item.mainType,             // 信息 ID
              item.name,                 // 航路名称
              color                      // 颜色
            );
          }
        });
      });
    },
    cirularpush(shape, index, infoid, text, color) {
      // 检查 points 数组是否有效
      if (shape.points && shape.points.length > 0) {
        const centerPoint = shape.points[0]; // 获取第一个点作为圆柱体的中心点

        // 确保 centerPoint 有有效的经纬度
        if (centerPoint.latitude && centerPoint.longitude) {
          this.gisdata.circular.push({
            longitude: centerPoint.longitude,
            latitude: centerPoint.latitude,
            minAltitude: shape.minAltitude,
            maxAltitude: shape.maxAltitude,
            radius: shape.rout, // 使用 rout 作为半径
            activeidentityid: infoid,
            index: index,
            color: color,
            text: text,
          });
        } else {
          console.log('Warning: Invalid center point in shape:', shape);
        }
      } else {
        console.log('Warning: No points data for shape:', shape);
      }
    },
    polygonalpush(points, minAltitude, maxAltitude, index, infoid, text, color) {
      // 构建多边形数据
      const polygonalData = {
        coordinates: [],  // 存放多边形顶点的经纬度和高度
        minAltitude: minAltitude,  // 从 shape 获取最小高度
        maxAltitude: maxAltitude,  // 从 shape 获取最大高度
        index: index,
        activeidentityid: infoid,
        text: text,
        color: color
      };

      // 检查 points 是否存在且是一个有效数组
      if (points && Array.isArray(points) && points.length > 0) {
        // 遍历 points 数组中的每个点
        points.forEach(point => {
          // 确保每个点都包含有效的经纬度和高度
          if (point.longitude !== undefined && point.latitude !== undefined && point.altitude !== undefined) {
            // 将点的经纬度和高度存入 coordinates 数组
            polygonalData.coordinates.push({
              longitude: point.longitude,
              latitude: point.latitude,
              altitude: point.altitude // 添加高度信息
            });
          } else {
            console.log("点数据缺少经纬度或高度信息:", point);
          }
        });
      } else {
        console.log("没有可用的顶点数据 (points 为空或未定义)");
      }

      // 如果有有效的坐标数据，则将多边形数据添加到 GIS 数据结构中
      if (polygonalData.coordinates.length > 0) {
        this.gisdata.polygonal.push(polygonalData);
        console.log("多边形柱体已添加至 GIS 数据:", this.gisdata.polygonal);
      } else {
        console.log("没有有效的多边形坐标数据，未添加到 GIS 数据结构中");
      }
    },

    straightpush(points, minAltitude, maxAltitude, index, infoid, text, color) {
      // console.log('点线形航路数据:', points);

      // 构建 straight 数据结构
      const straightData = {
        coordinates: [],           // 包含经纬度和高度的数组
        minAltitude: minAltitude,  // 底部高度
        maxAltitude: maxAltitude,  // 顶部高度
        index: index,
        activeidentityid: infoid,
        color: color,
        text: text
      };

      // 遍历 points，提取经纬度和高度信息
      points.forEach(point => {
        straightData.coordinates.push({
          longitude: point.longitude,
          latitude: point.latitude,
          altitude: point.altitude
        });
      });

      // 添加到 GIS 数据的 straight 部分
      this.gisdata.straight.push(straightData);
      // console.log('straightData 已添加至 GIS 数据:', straightData);
    },
    updatePolygonAreas() {
      // 遍历 GIS 数据中的多边形数据
      this.gisdata.polygonal.forEach((polygon) => {
        const positions = [];
        const pointNames = [];
        let minHeight = polygon.minAltitude;
        let maxHeight = polygon.maxAltitude;

        // 提取经纬度和高度数据
        polygon.coordinates.forEach((point, index) => {
          // 将经纬度添加到 positions 数组
          positions.push(point.longitude, point.latitude);

          // 为每个点命名
          pointNames.push(`${polygon.text} - 点${index + 1}`);

          // 计算最小和最大高度（可以根据需要去除，如果已通过 polygon 中的值设置）
          if (point.altitude < minHeight) {
            minHeight = point.altitude;
          }
          if (point.altitude > maxHeight) {
            maxHeight = point.altitude;
          }
        });

        // 使用自定义方法绘制 3D 多边形柱状体
        draw3DPolygonalPrismM1(
          this.viewer,
          positions,
          minHeight,
          maxHeight,
          polygon.color, // 使用数据中设置的颜色
          0.5,           // 假设这是柱状体的透明度或其它参数
          pointNames
        );
      });
    },
    // 绘制圆形区域
    updateCircleAreas() {
      // 检查是否有圆柱体数据
      if (!this.gisdata.circular || this.gisdata.circular.length === 0) {
        console.log("没有圆柱体数据可绘制");
        return;  // 如果没有数据，直接退出
      }

      this.gisdata.circular.forEach((cylinder) => {
        const lon = cylinder.longitude;
        const lat = cylinder.latitude;
        const minHeight = cylinder.minAltitude;
        const maxHeight = cylinder.maxAltitude;
        const radius = cylinder.radius;
        const color = cylinder.color; // 圆柱体的颜色
        const text = cylinder.text;  // 圆柱体的文本标签

        // 调用绘制方法绘制圆柱体区域
        drawCylinderAreaM1(
          this.viewer,   // 传入 viewer 实例
          lon,                  // 经度
          lat,                  // 纬度
          minHeight,            // 最低高度
          maxHeight,            // 最高高度
          radius,               // 半径
          color,                // 颜色
          0.5,                  // 半透明度
          text                  // 文本标签
        );
      });
    },
    updateRoutes() {
      // 遍历 GIS 数据中的航路数据
      this.gisdata.straight.forEach((route) => {
        const positions = [];
        const pointNames = [];
        const sizes = [];

        // 遍历每条航路的数据，提取经纬度、最小高度和最大高度
        route.coordinates.forEach((point, index) => {
          // 确保每个点的经纬度和高度都按顺序推入 positions 数组
          positions.push(point.longitude, point.latitude, point.altitude);
          pointNames.push(`${route.text} - 点${index + 1}`);

          // 为每个航路段设置大小
          if (index < route.coordinates.length - 1) {
            sizes.push([50, 20]); // 假设每段的宽度为50，高度为20
          }
        });

        // 调用自定义的绘制方法，传递经纬度、大小、透明度、颜色、点名称
        draw3DRectangularPipelineTrackM1_2(
          this.viewer,
          positions,
          sizes,
          0.7,              // 假设这是透明度或其他参数
          route.color,      // 使用数据中设置的颜色
          route.text,       // 使用航路的文本信息
          pointNames
        );
      });
    },
    // 执行 zoomTo 操作
    zoomToEntities() {
      if (this.viewer.entities.values.length > 0) {
        // this.viewer.zoomTo(this.viewer.entities);
        this.viewer.flyTo(this.viewer.entities, {
          duration: 0, // 飞行动画持续时间，可自行调整
          offset: new Cesium.HeadingPitchRange(
            Cesium.Math.toRadians(180), // 朝向角度
            Cesium.Math.toRadians(-30), // 俯仰角度
            15000 // 距离（可以调整至适合的视距）
          )
        });
      } else {
        console.log("没有可绘制的实体，跳过 zoomTo 操作");
      }
    },
    async initializeCesium() {
      try {
        this.viewer = new Xmap.Viewer('cesiumContainer').viewer;
        // Xmap.AirspaceManage.HierarchicalGrid.createImageryProvider('xyz',
        //   {
        //     url: 'https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}'
        //   })
        this.viewer.imageryLayers.addImageryProvider(
          new Cesium.OpenStreetMapImageryProvider({
            // url: `http://192.168.0.135:8001/rsimageofhigh`,
            url: process.env.VUE_APP_MAP,
            fileExtension: 'png',
            maximumLevel: 19
          })
        )
        // // 加载3dtiles模型数据
        // Xmap.AirspaceManage.HierarchicalGrid.load3dtiles('http://192.168.0.135:9027/prod-api/static/3dtiles3/tileset.json')
        // 全国高程数据
        Xmap.AirspaceManage.HierarchicalGrid.loadDEM(process.env.VUE_APP_HEIGHT_MAP, true)


        this.viewer.scene.screenSpaceCameraController.zoomEventTypes = [
          Cesium.CameraEventType.WHEEL
        ];
        // console.log("Cesium.CameraEventType",Cesium.CameraEventType )
        this.viewer.scene.screenSpaceCameraController.tiltEventTypes = [
          Cesium.CameraEventType.MIDDLE_DRAG // 鼠标中键按下事件
        ];
        // 设置初始相机视图
        this.viewer.camera.setView({
          destination: Cesium.Cartesian3.fromDegrees(113.5405629, 22.1247559, 17000),
        });
        console.log('Cesium version', Cesium.VERSION);
      } catch (error) {
        console.error('Cesium initialization failed:', error);
      }
    },
    S6drawDrone() {
      if (this.ws) {
        console.log("Closing previous WebSocket connection");
        this.ws.onmessage = null;
        this.ws.onclose = null;
        this.ws.close();
        this.ws = null;
      }

      this.ws = new WebSocket(`ws://${baseWebsocketApi}/ws/message`);

      this.ws.onopen = () => {
        console.log("ws onopen");
        this.wsClosing = false;
      };

      this.ws.onmessage = (e) => {
        // 检查连接状态和关闭标记
        if (this.wsClosing || this.ws.readyState !== WebSocket.OPEN) {
          console.log("WebSocket is closing or closed, ignoring message.");
          return;
        }
        console.log("ws onmessage");
        console.log("本次websocket传入的数据", e.data)

        const droneData = JSON.parse(e.data);

        // 提取 `devId`、经纬度、和高度信息
        const devId = droneData.devId;
        const latitude = parseFloat(droneData.lat);
        const longitude = parseFloat(droneData.lon);
        const altitude = parseFloat(droneData.height);

        // 查找具有相同 `devId` 的无人机模型
        const existingDrone = this.droneModels.find(
          (model) => model.devId === devId
        );

        // 将位置转换为 `Cartesian3`
        const cartographic = new Cesium.Cartographic(
          Cesium.Math.toRadians(longitude),
          Cesium.Math.toRadians(latitude),
          altitude
        );
        const position = Cesium.Ellipsoid.WGS84.cartographicToCartesian(cartographic);

        if (existingDrone) {
          // 如果模型已存在，则更新其位置
          existingDrone.position = position;
        } else {
          // 如果模型不存在，创建并添加无人机模型
          const droneModel = addDroneModel(this.viewer, position, "/drone3.glb");
          droneModel.devId = devId; // 记录 devId 以便下次查找
          this.droneModels.push(droneModel);
        }
        // // 如果模型数组为空，创建模型
        // if (this.droneModels.length === 0) {
        //   droneData.forEach((item) => {
        //     const cartographic = new Cesium.Cartographic(
        //       Cesium.Math.toRadians(item.longitude),
        //       Cesium.Math.toRadians(item.latitude),
        //       item.altitude
        //     );
        //     const position =
        //       Cesium.Ellipsoid.WGS84.cartographicToCartesian(cartographic);

        //     // 创建并添加无人机模型
        //     const droneModel = addDroneModel(
        //       this.viewer,
        //       position,
        //       "/drone3.glb"
        //     );
        //     this.droneModels.push(droneModel);
        //   });
        // } else {
        //   // 更新已存在模型的位置
        //   droneData.forEach((item, index) => {
        //     const cartographic = new Cesium.Cartographic(
        //       Cesium.Math.toRadians(item.longitude),
        //       Cesium.Math.toRadians(item.latitude),
        //       item.altitude
        //     );
        //     const position =
        //       Cesium.Ellipsoid.WGS84.cartographicToCartesian(cartographic);

        //     // 更新模型位置
        //     this.droneModels[index].position = position;
        //   });
        // }
      };

      this.ws.onclose = () => {
        console.log("WebSocket connection closed");
        this.wsClosing = false;
        this.ws = null;
      };
    },
  },

  watch: {
    // 监听 statusDialogVisible 的变化
    statusDialogVisible(newValue, oldValue) {
      if (newValue === false && oldValue === true) {
        // 当 statusDialogVisible 从 1 变为 0 时，调用子组件的 resetSelection 方法
        this.$refs.customTable.resetSelection();
        console.log("resetSelection called");
      }
    },
  },
};
</script>


<style scoped lang="css">
h3 {
  color: #ffffff;
}

/* 顶部内容区样式 */
.header-content {
  position: relative;
  width: 100%;
  /* 使其占据整个宽度 */
  height: 10%;
  background: url("../assets/img/module1/page1top.png") no-repeat;
  background-size: cover;
  display: flex;
  align-items: center;
  /* 垂直居中 */
  padding: 5px;
  /* 增加内部间距 */
}

/* 标题样式 */
.header-title {
  background-image: linear-gradient(180deg,
      rgba(200, 215, 228, 1) 0,
      rgba(255, 255, 255, 1) 100%);
  position: relative;
  flex: 2;
  margin-left: 5%;
  width: 20%;
  color: rgba(112, 112, 112, 1);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 1px;
  font-family: PangMenZhengDao-3;
  text-align: left;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 图标样式 */
.header-icon {
  position: relative;
  width: 22px;
  height: 20px;
  margin-left: 20px;
  /* 与其他内容间隔 */
  margin-top: -20px;
}

.image_3 {
  position: absolute;
  /* 图片绝对定位，不影响布局 */
  top: 14%;
  left: 15%;
  width: 80%;
  /* 让图片宽度覆盖整个容器 */
  height: 80%;
  /* 让图片高度覆盖整个容器 */
  z-index: 0;
  /* 将背景图片置于内容下层 */
}


.right-panel-container {
  position: absolute;
  top: 15% !important;
  right: 2% !important;
  width: 34% !important;
  height: 76%;
  color: white;
  padding: 20px;
  z-index: 5;
}

.img_left_title {
  position: relative;
  left: 0%;
  top: 5%;
  background-size: 100% 100%;
  /* background-color: rgba(200, 215, 228, 1); */
}

.text_left_title {
  position: absolute;
  left: 19%;
  top: 5.9%;
  width: 60%;
  font-family: 'smallTitleFont', sans-serif;
  overflow-wrap: break-word;

  background-image: linear-gradient(180deg,
      rgba(200, 215, 228, 1) 0,
      rgba(255, 255, 255, 1) 100%);
  color: rgba(112, 112, 112, 1);
  font-size: 20px;
  letter-spacing: 1px;
  /* font-family: PangMenZhengDao-3; */
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
  line-height: 23px;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.table-actions {
  position: relative;
  /* background-color: #ffffff; */
  /* left: 5%;
  top: 10%; */
  z-index: 1;
  width: 300px;
  height: 30px;
}

.table-actions-2 {
  position: absolute;
  left: 30%;
  top: 9%;
  z-index: 1;
  width: 100%;
  height: 7%;
  pointer-events: auto;
}

.search-input {
  position: relative;
  left: 0%;
  top: 6%;
  height: 100%;
  width: auto;
  z-index: 1;
  border: none;
  background-image: url("../assets/img/module2/search.png");
  background-size: contain;
  /* 背景图片覆盖按钮大小 */
  background-color: transparent;
  background-size: 100% 100%;
  /* 背景图片覆盖按钮大小 */
  /* color: #ffffff; */
  padding-left: 10px;
  /* 添加内边距 */
  font-family: AlibabaPuHuiTi_2_55_Regular;
  font-weight: NaN;
  color: white;
}

.search-input option {
  /* background-color: #000000; 背景颜色 */
  color: black;
  /* 文字颜色 */
  font-family: AlibabaPuHuiTi_2_55_Regular;
  font-weight: normal;
  padding: 5px;
  /* 内边距 */
}

.search-input::placeholder {
  font-family: AlibabaPuHuiTi_2_55_Regular;
  color: #ffffff;
  font-weight: NaN;
  font-size: 14px;
  padding-left: 6px;
  /* 添加内边距 */
}

.filter-button {
  background-image: url("../assets/img/module2/filtericon1.png");
  position: absolute;
  background-size: contain;
  /* 背景图片覆盖按钮大小 */
  background-repeat: no-repeat;
  background-color: transparent;
  color: transparent;
  left: 18%;
  top: 24%;
  width: 15px;
  height: 15px;
  z-index: 3;
  border: none;
  cursor: pointer;
  filter: brightness(0.1);
}

.filer-button:active {
  opacity: 0.8;
  /* 点击时使按钮变暗 */
}

.sort-select {
  position: absolute;
  left: 22%;
  top: 6%;
  width: 18%;
  height: 60%;
  z-index: 1;
  background-image: url("../assets/img/module2/search.png");
  background-size: 100% 100%;
  /* 背景图片覆盖按钮大小 */
  background-repeat: no-repeat;
  background-color: transparent;
  border: none;
  /* 去除边框 */
  border-radius: 4px;
  /* 设置圆角 */
  color: #ffffff;
  /* 设置文字颜色 */
  padding-left: 10px;
  /* 设置左侧内边距 */
  font-size: 14px;
  font-family: AlibabaPuHuiTi_2_55_Regular;
  font-weight: NaN;
}

.sort-button {
  background-image: url("../assets/img/module2/sorticon1.png");
  position: absolute;
  background-size: contain;
  /* 背景图片覆盖按钮大小 */
  background-repeat: no-repeat;
  background-color: transparent;
  color: transparent;
  left: 40%;
  top: 11%;
  width: 5%;
  height: 60%;
  z-index: 3;
  border: none;
  cursor: pointer;
}

.table-container2 {
  position: absolute;
  left: 50%;
  top: 6%;
  width: 30%;
  height: 80%;
  z-index: 1;
  display: block;
}

.table-context {
  position: absolute;
  /* background-color: rgb(0, 247, 255); */
  left: 5%;
  top: 13.5%;
  z-index: 1;
  width: 60%;
  height: 70%;

}


/* 旧元素 */
.plan-diolog {
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 20px;
  height: 80%;
  /* 设置高度，使布局固定 */
}

.plan-diolog-left-pane {
  width: 45%;
  /* 左侧占 50% 宽度 */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.plan-diolog-left-up-pane {
  padding: 10px;
  border-radius: 5px;
  margin-bottom: 20px;
}

.plan-diolog-left-down-pane {
  padding: 10px;
  border-radius: 5px;
}

.plan-diolog-right-pane {
  width: 55%;
  /* 右侧占 35% 宽度 */
  display: flex;
  flex-direction: column;
  align-items: center;

}



h1 {
  color: #ffffff;
}

h2 {
  color: #ffffff;
}

h3 {
  color: #ffffff;
}

.table-button-display {
  background-image: url('../assets/img/module1/button-tijiao.png');
  position: absolute;
  background-size: 100% 100%;
  /* 背景图片覆盖按钮大小 */
  background-color: transparent;
  color: transparent;
  right: 0%;
  /* left: 46%; */
  /* top: 5%; */
  height: 30px;
  width: 50px;
  border: none;
  cursor: pointer;
  color: white;
  font-size: 16px;
  text-align: center;
  line-height: 8px;
  z-index: 2;
}

.table-button-hidden {
  background-image: url('../assets/img/module1/button-bohui.png');
  position: absolute;
  background-size: 100% 100%;
  /* 背景图片覆盖按钮大小 */
  background-color: transparent;
  color: transparent;
  right: 0%;
  /* left: 46%; */
  /* top: 5%; */
  height: 30px;
  width: 50px;
  border: none;
  cursor: pointer;
  color: white;
  font-size: 16px;
  text-align: center;
  line-height: 8px;
  z-index: 2;
}


.cesiumContainerBox {
  width: 100%;
  position: relative;
  height: 83vh;
  margin: 0;
  padding: 0;

  .mapBg {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 3;
    pointer-events: none;
  }

  .layer {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 2;
    pointer-events: none;
    box-shadow: inset -200px 0px 60px -20px rgb(6 7 29 / 35%), inset 200px 0px 60px -20px rgb(6 7 29 / 35%);
  }

}
</style>
<style scoped lang="css" src="../assets/indexModule6.css" />
